<template>
    <div @mousewheel="scrolling">
        <Header/>
        <Search :isFixed="isFixed" @search="searchBusinessByKw"/>
        <FoodType/>
        <SuperMemberBanner/>
        <Recommend :businessList="businessList"/>
        <Footer/>
    </div>

</template>

<script setup>
import Footer from "../components/Footer.vue";
import Header from "../components/Header.vue";
import Search from "../components/Search.vue";
import FoodType from "../components/FoodType.vue";
import SuperMemberBanner from "../components/SuperMemberBanner.vue";
import Recommend from "../components/Recommend.vue";

import { onMounted, onUnmounted, reactive,watch,ref } from 'vue'
import {getAllBusinessAPI} from "../api/api.js";
import {getSessionStorage} from "../common.js";

const isFixed = ref(false)
const data=reactive({
    oldScrollTop:0,
});
const businessList = reactive([])

onMounted(()=>{
    //添加滑轮滚动事件
    window.addEventListener("scroll", scrolling);
    getAllBusinessAPI().then(res=>{
        businessList.splice(0,businessList.length)
        businessList.push(...res.data.data)
    })
})
onUnmounted(()=>{
    window.removeEventListener("scroll", scrolling);
})

const scrolling=()=>{
    // 滚动条距文档顶部的距离
    let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
    // 滚动条滚动的距离
    let scrollStep = scrollTop - data.oldScrollTop;
    isFixed.value = scrollStep >= 80
};

const searchBusinessByKw=(kw)=>{
    getAllBusinessAPI(kw).then(res=>{
        businessList.splice(0,businessList.length)
        businessList.push(...res.data.data)
    })
}

</script>




<style scoped>
</style>